<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<title>广告图片添加修改</title>
<link th:href="@{/ajax/libs/cropbox/cropbox.css}" rel="stylesheet"/>
<body>
<h1 >广告图片上传</h1>
<!--<div class="text-center">
	<img alt="image" class="img-circle m-t-xs img-responsive" th:src="(${attachement.path} == '') ? @{/img/profile.jpg} : @{/profile/guanggao/} + ${attachement.path}"  style="width: 200px"/>
</div>-->
<!--<form action="../updateGuanggao" method="post" id="form-adverinfo-edit" enctype="multipart/form-data">
	<input id="advertinfoId" name="advertinfoId" th:field="${adverinfo.advertinfoId}"  type="hidden">
	<p>选择文件: <input type="file" name="avatarfile"/></p>
	<p><input type="submit" value="提交"/></p>
</form>-->
<form id="picForm">
	<table cellpadding="100">
		<input id="advertinfoId" name="advertinfoId" th:field="${adverinfo.advertinfoId}"  type="hidden">
		<tr>
			<td>
				<div class="container">
					<div class="avatar-upload">
						<div class="avatar-edit">
							<input type='file' name="pictures" id="imageOne" accept=".png, .jpg, .jpeg"/>
							<label for="imageOne"></label>
						</div>
						<div class="avatar-preview">
							<div id="imageOnePreview" style="background-image: url(http://ww3.sinaimg.cn/large/006tNc79ly1g556ca7ovqj30ak09mta2.jpg);width: 550px;height: 330px;">

							</div>
						</div>
					</div>
				</div>
			</td>
		</tr>
	</table>
</form>
<input type="submit" onclick="getUpload()" value="提交"/>
</body>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/cropbox/cropbox.js}"></script>
<script type="text/javascript">
	var prefix = ctx + "system/adverinfo"
	function getUpload(){
		//获取form表单中所有属性  key为name值
		var formData = new FormData($("#picForm")[0]);
		$.ajax({
			url: '../updateGuanggao',
			type: 'POST',
			data: formData,
			processData: false,
			contentType: false,
			success:(function(data) {
				window.confirm(data.message);
				window.location.reload();
			}),
			error:(function(res) {
				alert("失败");
			})
		});
	}


	function readURLOne(input) {
		if (input.files[0]) {
			var reader = new FileReader();
			reader.onload = function(e) {
				$('#imageOnePreview').css('background-image', 'url('+e.target.result +')');
				$('#imageOnePreview').hide();
				$('#imageOnePreview').fadeIn(650);
			}
			reader.readAsDataURL(input.files[0]);
		}
	}
	$("#imageOne").change(function() {

		readURLOne(this);
	});






</script>
<!--    <div class="container">
		<input id="advertinfoId" name="advertinfoId" th:field="${adverinfo.advertinfoId}"  type="hidden">
        <div class="imageBox"> 
	        &lt;!&ndash;<div class="thumbBox"></div> &ndash;&gt;
	        <div class="spinner" style="display: none">Loading...</div> 
	   </div> 
	   <div class="action"> 
	       <div class="new-contentarea tc">
	           <a href="javascript:void(0)" class="upload-img"> <label for="avatar">上传图像</label> </a> 
	           <input type="file" class="" name="avatar" id="avatar" accept="image/*"/>
	       </div> 

	   </div> 
	   &lt;!&ndash;<div class="cropped"></div> &ndash;&gt;
    </div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/cropbox/cropbox.js}"></script>
<script type="text/javascript">
var cropper;
$(window).load(function() {
	var avatar = '[[${adverinfo.avatar}]]';
    var options = {
        /*thumbBox: '.thumbBox',*/
        spinner: '.spinner',
        imgSrc: $.common.isEmpty(avatar) ? ctx + 'img/profile.jpg' : ctx + 'profile/avatar/' + avatar
    }
    cropper = $('.imageBox').cropbox(options);
    $('#avatar').on('change', function() {
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;

            //根据MIME判断上传的文件是不是图片类型
            if((options.imgSrc).indexOf("image/")==-1){
                $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG,JEPG，PNG后缀的文件。");
            } else {
                cropper = $('.imageBox').cropbox(options);
            }
        }
        reader.readAsDataURL(this.files[0]);

    })
    

});
var prefix = ctx + "system/adverinfo"
function submitHandler() {


    var advertinfoId = $("#advertinfoId").val();

	var img = cropper.getBlob();

    var formdata = new FormData();
    formdata.append("avatarfile", img,"advertinfoId",advertinfoId);
    $.ajax({
        url: prefix + "/updateGuanggao",
        data: formdata,
        type: "post",
        processData: false,
        contentType: false,
        success: function(result) {
        	$.operate.saveSuccess(result);
        }
    })
}
</script>-->
</body>
</html>
